<template>
  <view>
    <view v-if="showMain">
      <view class="title-hr">健康档案</view>
      <view class="personal-info">
        <swiper
          class="info-box"
          :duration="300"
          :autoplay="false"
          :indicator-dots="true"
          @change="({ detail }) => changeUser(detail)"
        >
          <swiper-item v-for="item in usersList" :key="item.id">
            <view class="box-left">
              <view class="box-wrap">
                <view class="title">
                  <text class="p-name">{{ item.name }}</text>
                  <text class="p-relation">{{ item.relation_type }}</text>
                </view>
                <view class="info">{{ item.gender_type }} {{ item.age }} </view>
              </view>
            </view>
            <view class="box-right">
              <u-button
                text="基本信息"
                class="base-info"
                @click="() => changePageState(PageState.ModifyUser)"
              ></u-button>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="nav-wrap">
        <view class="nav-spos" @click="() => changeNavStatus(true)">
          <view class="nav-text" :class="navStatus ? 'nav-text-active' : ''">
            病历本
          </view>
          <view :class="navStatus ? 'spos' : ''"></view>
        </view>
        <view class="nav-spos" @click="() => changeNavStatus(false)">
          <view class="nav-text" :class="!navStatus ? 'nav-text-active' : ''">
            体检报告
          </view>
          <view :class="!navStatus ? 'spos' : ''"></view>
        </view>
      </view>
      <view class="btn-wrap">
        <u-button
          class="btn auto"
          @click="
            () =>
              changePageState(navStatus ? PageState.Main : PageState.GetReport)
          "
        >
          <u-icon :name="leftBtnIcon" size="50rpx" color="#fff"></u-icon>
          <text class="split">{{ leftBtnText }}</text>
        </u-button>
        <u-button
          class="btn split manual"
          @click="
            () =>
              changePageState(
                navStatus ? PageState.AddRecord : PageState.AddReport
              )
          "
        >
          <u-icon :name="rightBtnIcon" size="50rpx" color="#fff"></u-icon>
          <text class="split">{{ rightBtnText }}</text>
        </u-button>
      </view>
      <view v-if="navStatus">
        <view class="title">本年度健康汇总</view>
        <view class="summary">
          <view class="summary-item">
            <view class="num"> 1</view>
            <view class="text">门诊记录</view>
          </view>
          <view class="summary-item">
            <view class="num">1 </view>
            <view class="text">住院记录</view>
          </view>
          <view class="summary-item">
            <view class="num"> 1</view>
            <view class="text">体检记录</view>
          </view>
        </view>
        <view class="title">健康记录</view>
        <view
          class="box-wrap"
          v-for="(item, index) in recordList"
          :key="item.id"
          @click="() => changeRecord(index)"
        >
          <view class="info-wrap">
            <text class="info-bg"
              >{{ item.created_at.split(" ")[0] }}丨住院</text
            >
            {{ item.section.title }}
          </view>
          <view class="info-title">
            {{ item.user_name }} {{ item.hospital.title }}
          </view>
        </view>
      </view>
      <view v-else>
        <view
          class="report-wrap"
          v-for="(item, index) in recordList"
          :key="item.id"
          @click="() => changeReport(index)"
        >
          <view class="report-left">
            <view class="report-title"> 用户 </view>
            <view class="report-item"> 体检时间：{{ 2019 }} </view>
            <view class="report-item"> 体检机构：{{ 2019 }} </view>
          </view>
          <view
            :class="
              item[MedicalRecordKeys.PatientCaseType] ===
              PatientCaseTypeKeys.SelfUpload
                ? 'report-right-self'
                : 'report-right-outpatient'
            "
          >
            {{ PatientCaseTypeText[item[MedicalRecordKeys.PatientCaseType]] }}
          </view>
        </view>
      </view>
    </view>
    <User
      v-else-if="showUser"
      :key="new Date().getTime()"
      :pageState="pageState"
      :user="usersList[currentUser]"
      :goback="() => changePageState(PageState.Main)"
    />
    <ConfigMedicalRecord
      v-else-if="showRecord"
      :key="new Date().getTime()"
      :pageState="pageState"
      :user="usersList[currentUser]"
      :record="recordList[currentRecord]"
      :goback="() => changePageState(PageState.Main)"
    />
  </view>
</template>

<script>
  import User from "./user/index.vue";
  import ConfigMedicalRecord from "./config-medical-record/index.vue";
  import healthRecords from "@/api/healthRecords";
  import {
    PageState,
    PatientCaseTypeKeys,
    MedicalRecordKeys,
    PatientCaseTypeText,
  } from "./helper";

  export default {
    components: {
      User,
      ConfigMedicalRecord,
    },

    data() {
      return {
        usersList: [],
        recordList: [],
        reportList: [],
        currentUser: 0,
        currentRecord: 0,
        currentReport: 0,
        navStatus: true,
        pageState: PageState.Main,
      };
    },

    created() {
      this.$axios({
        url: healthRecords.patientCase,
      }).then((res) => {
        this.recordList = res.data.arr;
      });
      this.$axios({
        url: healthRecords.userInfo,
      }).then((res) => {
        this.usersList = res.data.arr;
      });
    },

    methods: {
      changeRecord(currentRecord) {
        this.currentRecord = currentRecord;
        this.changePageState(PageState.ModifyRecord);
      },

      changeReport(currentReport) {
        this.currentReport = currentReport;
        uni.navigateTo({
          url: `/pages/health-records/config-examination-report/index?reportid=${
            this.reportList[this.currentReport] &&
            this.reportList[this.currentReport].id
          }`,
        });
      },

      // 切换用户
      changeUser(detail) {
        this.currentUser = detail.current;
        this.changeNavStatus(true);
      },

      // 切换菜单
      changeNavStatus(staus) {
        this.navStatus = staus;
      },

      // 修改页面状态
      changePageState(pageState) {
        if (pageState === PageState.GetReport) {
          uni.navigateTo({
            url: "/pages/health-records/get-hospital-list/index",
          });
          return;
        }
        if (pageState === PageState.AddReport) {
          uni.navigateTo({
            url: "/pages/health-records/config-examination-report/index",
          });
          return;
        }
        this.pageState = pageState;
      },
    },

    computed: {
      PageState: function () {
        return PageState;
      },
      // 左边按钮文本
      leftBtnText: function () {
        return this.navStatus ? "扫描添加" : "取报告";
      },

      // 右边按钮文本
      rightBtnText: function () {
        return this.navStatus ? "手动添加" : "添加报告";
      },

      // 左边按钮文本
      leftBtnIcon: function () {
        return this.navStatus ? "scan" : "search";
      },

      // 右边按钮文本
      rightBtnIcon: function () {
        return this.navStatus ? "plus-circle" : "plus-circle";
      },

      // 是否显示主页
      showMain: function () {
        return this.pageState === PageState.Main;
      },

      // 是否显示用户
      showUser: function () {
        return [PageState.AddUser, PageState.ModifyUser].includes(
          this.pageState
        );
      },

      // 是否显示记录
      showRecord: function () {
        return [PageState.AddRecord, PageState.ModifyRecord].includes(
          this.pageState
        );
      },

      PatientCaseTypeKeys: function () {
        return PatientCaseTypeKeys;
      },

      MedicalRecordKeys: function () {
        return MedicalRecordKeys;
      },

      PatientCaseTypeText: function () {
        return PatientCaseTypeText;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .title-hr {
    height: 100rpx;
    background: rgba(65, 171, 133, 1);
    line-height: 100rpx;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: #fff;
  }
  .personal-info {
    height: 243rpx;
    background: rgba(65, 171, 133, 1);
    padding-top: 20rpx;

    & .info-box {
      width: 700rpx;
      height: 223rpx;
      margin: 0 auto;
      background: $uni-bg-color;
      border-radius: 16rpx;

      & .box-left {
        float: left;
        height: 100%;

        & .box-wrap {
          position: relative;
          top: 110rpx;
          margin-top: -50%;
          padding-left: 20rpx;

          & .title {
            & .p-name {
              color: rgba(80, 80, 80, 1);
              font-weight: bold;
              font-size: 16px;
            }

            & .p-relation {
              margin-left: 20rpx;
              color: rgba(80, 80, 80, 1);
              height: 46rpx;
              border-radius: 23rpx;
              background: rgba(184, 229, 213, 1);
              padding: 0 10rpx;
            }
          }

          & .info {
            color: rgba(128, 128, 128, 1);
          }
        }
      }
      & .box-right {
        float: right;
        height: 100%;

        & .base-info {
          position: relative;
          top: 90rpx;
          height: 56rpx;
          border-radius: 28rpx;
          border: 2rpx solid $uni-border-color;
          margin-right: 20rpx;
        }
      }
    }
  }
  .nav-wrap {
    width: 750rpx;
    background: rgba(65, 171, 133, 1);
    overflow: hidden;

    & .nav-spos {
      float: left;
      width: 375rpx;
      text-align: center;
      color: #fff;

      & .nav-text {
        font-size: 16px;
      }

      & .nav-text-active {
        font-weight: bold;
      }

      & .spos {
        width: 40rpx;
        background: $uni-bg-color;
        height: 10rpx;
        border-radius: 5rpx;
        display: inline-block;
      }
    }
  }
  .btn-wrap {
    width: 700rpx;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;

    & .btn {
      margin-top: 20rpx;
      width: 338rpx;
      height: 140rpx;
      float: left;
      border-radius: 17rpx;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
    }

    & .auto {
      background: rgba(67, 207, 124, 1);
    }

    & .split {
      margin-left: 20rpx;
    }

    & .manual {
      background: rgba(0, 186, 173, 1);
    }
  }
  .title {
    margin-top: 30rpx;
    padding-left: 30rpx;
    font-size: 16px;
    font-weight: bold;
  }
  .summary {
    margin: 20rpx;
    background: $uni-bg-color;
    border-radius: 17rpx;
    height: 180rpx;
    overflow: hidden;

    & .summary-item {
      float: left;
      width: 33%;
      height: 100%;
      text-align: center;
      padding-top: 20rpx;

      & .num {
        font-size: 16px;
        font-weight: bold;
      }

      & .text {
        font-size: $uni-font-size-base;
      }
    }
  }
  .box-wrap {
    background: $uni-bg-color;
    margin: 20rpx;
    border-radius: 17rpx;
    padding: 20rpx;

    & .info-wrap {
      overflow: hidden;

      & .info-bg {
        color: rgba(80, 80, 80, 1);
        background: $uni-bg-color;
        border-radius: 33rpx;
        padding: 0 10rpx;
        margin-right: 20rpx;
      }
    }

    & .info-title {
      color: rgba(80, 80, 80, 1);
      font-weight: bold;
    }
  }

  .report-wrap {
    background: $uni-bg-color;
    margin: 20rpx;
    border-radius: 17rpx;
    padding: 20rpx;
    display: table;
    width: 670rpx;

    & .report-left {
      display: table-cell;

      & .report-title {
        font-size: 16px;
        font-weight: bold;
      }

      & .report-item {
        font-size: $uni-font-size-sm;
        color: rgba(166, 166, 166, 1);
      }
    }

    & .report-right-self {
      display: table-cell;
      width: 150rpx;
      height: 100%;
      line-height: 100%;
      color: rgba(42, 130, 228, 1);
    }

    & .report-right-outpatient {
      display: table-cell;
      width: 150rpx;
      height: 100%;
      line-height: 100%;
      color: rgba(65, 171, 133, 1);
    }
  }
</style>
